<template>
  <div class="login-container">
    <!-- 左侧品牌展示区 -->
    <div class="login-banner">
      <div class="banner-content">
        <h1 class="banner-title">Paw Lint Hub</h1>
        <p class="banner-slogan">见证每一个成长瞬间，分享每一份陪伴喜悦</p>

        <div class="pet-illustrations">
          <img
            src="https://picsum.photos/id/237/600/400"
            alt="可爱宠物"
            class="pet-image main-pet"
          />
          <img
            src="https://picsum.photos/id/169/100/100"
            alt="宠物伙伴"
            class="pet-image pet-1"
          />
          <img
            src="https://picsum.photos/id/1025/120/120"
            alt="宠物伙伴"
            class="pet-image pet-2"
          />
          <img
            src="https://picsum.photos/id/40/80/80"
            alt="宠物伙伴"
            class="pet-image pet-3"
          />
        </div>

        <div class="growth-elements">
          <div class="growth-line"></div>
          <div class="growth-points">
            <div class="growth-point" v-for="i in 3" :key="i"></div>
          </div>
        </div>
      </div>
    </div>

    <!-- 右侧登录表单区 -->
    <div class="login-form-panel">
      <div class="form-card">
        <div class="login-logo">
          <svg viewBox="0 0 100 100" width="60" height="60">
            <circle cx="50" cy="50" r="45" fill="#FF9F43" />
            <circle cx="35" cy="40" r="6" fill="white" />
            <circle cx="65" cy="40" r="6" fill="white" />
            <path
              d="M30,70 Q50,85 70,70"
              stroke="white"
              stroke-width="4"
              fill="none"
            />
            <path
              d="M25,30 Q50,10 75,30"
              stroke="#4CAF50"
              stroke-width="3"
              fill="none"
              stroke-dasharray="5,3"
            />
          </svg>
          <h2>Paw Lint Hub</h2>
        </div>

        <div class="form-wrap">
          <el-form
            ref="loginRef"
            :model="loginForm"
            :rules="loginRules"
            class="login-form"
          >
            <el-form-item prop="username">
              <el-input
                v-model="loginForm.username"
                type="text"
                size="large"
                auto-complete="off"
                placeholder="账号"
              >
                <template #prefix
                  ><svg-icon
                    icon-class="user"
                    class="el-input__icon input-icon"
                /></template>
              </el-input>
            </el-form-item>
            <el-form-item prop="password">
              <el-input
                v-model="loginForm.password"
                type="password"
                size="large"
                auto-complete="off"
                placeholder="密码"
                @keyup.enter="handleLogin"
              >
                <template #prefix
                  ><svg-icon
                    icon-class="password"
                    class="el-input__icon input-icon"
                /></template>
              </el-input>
            </el-form-item>
            <el-form-item prop="code" class="checkCode" v-if="captchaEnabled">
              <el-input
                v-model="loginForm.code"
                size="large"
                auto-complete="off"
                placeholder="验证码"
                style="width: 63%"
                @keyup.enter="handleLogin"
              >
                <template #prefix
                  ><svg-icon
                    icon-class="validCode"
                    class="el-input__icon input-icon"
                /></template>
              </el-input>
              <div class="login-code">
                <img :src="codeUrl" @click="getCode" class="login-code-img" />
              </div>
            </el-form-item>
            <el-checkbox
              v-model="loginForm.rememberMe"
              style="margin: 0px 0px 25px 0px"
              >记住密码</el-checkbox
            >
            <el-form-item style="width: 100%">
              <el-button
                :loading="loading"
                size="large"
                type="primary"
                style="width: 100%"
                @click.prevent="handleLogin"
              >
                <span v-if="!loading">登 录</span>
                <span v-else>登 录 中...</span>
              </el-button>
            </el-form-item>
          </el-form>
        </div>
        <div class="register-wrap">
          还没有账户 ?
          <router-link class="link-type" :to="'/register'"
            >立即注册</router-link
          >
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router';

import { getCodeImg } from '@/api/login';
import Cookies from 'js-cookie';
import { encrypt, decrypt } from '@/utils/jsencrypt';
import useUserStore from '@/store/modules/user';

const title = import.meta.env.VITE_APP_TITLE;
const userStore = useUserStore();
const route = useRoute();
const router = useRouter();
const { proxy } = getCurrentInstance();

const loginForm = ref({
  username: 'admin',
  password: 'admin123',
  rememberMe: false,
  code: '',
  uuid: '',
});

const loginRules = {
  username: [{ required: true, trigger: 'blur', message: '请输入您的账号' }],
  password: [{ required: true, trigger: 'blur', message: '请输入您的密码' }],
  code: [{ required: true, trigger: 'change', message: '请输入验证码' }],
};

const codeUrl = ref('');
const loading = ref(false);
// 验证码开关
const captchaEnabled = ref(true);
// 注册开关
const register = ref(false);
const redirect = ref(undefined);

watch(
  route,
  (newRoute) => {
    redirect.value = newRoute.query && newRoute.query.redirect;
  },
  { immediate: true }
);

function handleLogin() {
  proxy.$refs.loginRef.validate((valid) => {
    if (valid) {
      loading.value = true;
      // 勾选了需要记住密码设置在 cookie 中设置记住用户名和密码
      if (loginForm.value.rememberMe) {
        Cookies.set('username', loginForm.value.username, { expires: 30 });
        Cookies.set('password', encrypt(loginForm.value.password), {
          expires: 30,
        });
        Cookies.set('rememberMe', loginForm.value.rememberMe, { expires: 30 });
      } else {
        // 否则移除
        Cookies.remove('username');
        Cookies.remove('password');
        Cookies.remove('rememberMe');
      }
      // 调用action的登录方法
      userStore
        .login(loginForm.value)
        .then(() => {
          const query = route.query;
          const otherQueryParams = Object.keys(query).reduce((acc, cur) => {
            if (cur !== 'redirect') {
              acc[cur] = query[cur];
            }
            return acc;
          }, {});
          router.push({ path: redirect.value || '/', query: otherQueryParams });
        })
        .catch(() => {
          loading.value = false;
          // 重新获取验证码
          if (captchaEnabled.value) {
            getCode();
          }
        });
    }
  });
}

function getCode() {
  getCodeImg().then((res) => {
    captchaEnabled.value =
      res.captchaEnabled === undefined ? true : res.captchaEnabled;
    if (captchaEnabled.value) {
      codeUrl.value = 'data:image/gif;base64,' + res.img;
      loginForm.value.uuid = res.uuid;
    }
  });
}

function getCookie() {
  const username = Cookies.get('username');
  const password = Cookies.get('password');
  const rememberMe = Cookies.get('rememberMe');
  loginForm.value = {
    username: username === undefined ? loginForm.value.username : username,
    password:
      password === undefined ? loginForm.value.password : decrypt(password),
    rememberMe: rememberMe === undefined ? false : Boolean(rememberMe),
  };
}
getCode();
getCookie();
// // 前往忘记密码页面
// const goForgot = () => {
//   router.push('/forget-password');
// };

// // 前往注册页面
// const goRegister = () => {
//   router.push('/register');
// };

// // 社交登录
// const wechatLogin = () => {
//   ElMessage.info('微信登录功能即将上线');
// };

// const qqLogin = () => {
//   ElMessage.info('QQ登录功能即将上线');
// };

// const weiboLogin = () => {
//   ElMessage.info('微博登录功能即将上线');
// };
</script>

<style scoped lang="scss">
.login-container {
  display: flex;
  min-height: 100vh;
  width: 100%;
  background-color: #f9fafb;
}

// 左侧Banner区域
.login-banner {
  flex: 1;
  background: linear-gradient(135deg, #4caf50 0%, #ff7a45 100%);
  /* background: url('../assets/images/t04cfb9e01d768c5824.png') no-repeat cover; */
  color: white;
  padding: 12rem;
  position: relative;
  overflow: hidden;

  .banner-content {
    max-width: 600px;
    margin: 0 auto;
    padding-top: 5rem;

    .banner-title {
      font-size: 2.8rem;
      text-align: center;
      margin-bottom: 1rem;
      text-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
      animation: fadeInUp 0.8s ease-out;
    }

    .banner-slogan {
      font-size: 1.2rem;
      opacity: 0.9;
      text-align: center;
      margin-bottom: 3rem;
      animation: fadeInUp 0.8s ease-out 0.2s forwards;
      opacity: 0;
    }

    .pet-illustrations {
      position: relative;
      width: 100%;
      height: 400px;
      border-radius: 12px;
      overflow: hidden;
      box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
      animation: fadeInUp 0.8s ease-out 0.4s forwards;
      opacity: 0;

      .main-pet {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }

      .pet-1,
      .pet-2,
      .pet-3 {
        position: absolute;
        border: 3px solid white;
        border-radius: 50%;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        z-index: 10;
        transition: transform 0.3s ease;

        &:hover {
          transform: scale(1.1) rotate(5deg);
        }
      }

      .pet-1 {
        top: 20px;
        right: 20px;
        animation: float 3s ease-in-out infinite;
      }

      .pet-2 {
        bottom: 40px;
        left: 30px;
        animation: float 4s ease-in-out 0.5s infinite;
      }

      .pet-3 {
        top: 50%;
        left: 10%;
        transform: translateY(-50%);
        animation: float 3.5s ease-in-out 1s infinite;
      }
    }

    .growth-elements {
      margin-top: 2rem;
      position: relative;

      .growth-line {
        height: 3px;
        background: linear-gradient(90deg, #4caf50 0%, #8bc34a 100%);
        border-radius: 3px;
      }

      .growth-points {
        display: flex;
        justify-content: space-between;
        position: relative;
        top: -8px;

        .growth-point {
          width: 18px;
          height: 18px;
          background-color: white;
          border: 3px solid #4caf50;
          border-radius: 50%;
        }
      }
    }
  }
}

// 右侧表单区域
.login-form-panel {
  width: 30%;
  background-color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 50px;
  box-shadow: -5px 0 25px rgba(0, 0, 0, 0.05);

  .form-card {
    width: 100%;
    max-width: 420px;
    padding: 2rem 0;

    .login-logo {
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-bottom: 2.5rem;

      h2 {
        margin-top: 1rem;
        color: #333;
        font-weight: 600;
      }
    }

    .login-form {
      border-radius: 6px;
      background: #ffffff;
      /* width: 400px; */
      margin: auto;
      z-index: 1;
      .el-input {
        height: 40px;
        flex: 1;
        input {
          height: 40px;
        }
      }
      .input-icon {
        height: 39px;
        width: 14px;
        margin-left: 0px;
      }
    }
    .login-tip {
      font-size: 13px;
      text-align: center;
      color: #bfbfbf;
    }

    .checkCode.login-form-panel .form-card .login-form .el-input {
      flex: 1 !important;
    }
    .login-code {
      height: 40px;
      display: flex;
      padding-left: 12px;
      img {
        cursor: pointer;
        vertical-align: middle;
      }
    }
    .register-wrap {
      text-align: center;
      .link-type {
        color: #409eff;
        font-weight: 600;
      }
    }

    > .login-code-img {
      height: 40px;
      padding-left: 12px;
    }
    .register-section {
      text-align: center;
      margin: 1.5rem 0;
      color: #666;
      font-size: 0.9rem;

      .register-link {
        color: #ff9f43;
        margin-left: 5px;
        font-weight: 500;
      }
    }

    .divider {
      position: relative;
      height: 1px;
      background-color: #e5e7eb;
      margin: 1.5rem 0;

      .divider-text {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        background-color: white;
        padding: 0 10px;
        font-size: 0.85rem;
        color: #999;
      }
    }

    .social-login {
      display: flex;
      justify-content: center;

      .social-icon {
        font-size: 1.8rem;
        margin: 0 18px;
        color: #888;
        cursor: pointer;
        transition: all 0.3s ease;

        &:hover {
          color: #ff9f43;
          transform: translateY(-5px) scale(1.1);
        }
      }
    }
  }
}

// 动画效果
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes float {
  0% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-10px);
  }
  100% {
    transform: translateY(0px);
  }
}

// 响应式设计
@media (max-width: 992px) {
  .login-banner {
    display: none;
  }

  .login-form-panel {
    width: 100%;
    box-shadow: none;
  }
}
</style>
